<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <!---Read only section. Source panel edits to these document properties will not be persisted-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Incorporate User Resources</title>
        <!---End read only section. Additional scripts or document properties can be added outside this section-->

        <link href="ni-webvi-resource-v0/favicon.ico" type="image/x-icon" rel="icon">
<link href="ni-webvi-resource-v0/Web/dist/Styles/niBase.DeployedRun.min.css" type="text/css" rel="stylesheet">
<script src="ni-webvi-resource-v0/BrowserDetection.js" type="text/javascript" nomodule=""></script>
<script src="ni-webvi-resource-v0/DeployedRun.min.js" type="module"></script>
<script src="ni-webvi-resource-v0/VireoImport.min.js" type="module"></script>
<script src="ni-webvi-resource-v0/ResourceLoadDetection.js" defer=""></script>
<style ni-autogenerated-style-id="">
		/* Read only section. Source panel edits to the content of this style tag will not be persisted */
        [ni-control-id='2'] { --ni-background: rgba(255,255,255,1); --ni-border-width: 0px 0px 0px 0px; height: 860px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 30px 30px 30px 30px; width: 1000px; --ni-max-width: none; }
        .ni-front-panel-wrapper { min-width: 1000px; }
        [ni-control-id='3'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 4px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: -16px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='4'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 100px; left: 4px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 4px; width: 984px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='5'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 67px; left: 692px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 679px; width: 152px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='7'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 692px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 659px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='6'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 67px; left: 692px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 775px; width: 152px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='9'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 692px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 755px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='8'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 152px; left: 866px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 680px; width: 88px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='11'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 866px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 660px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='10'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 290px; left: 609px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 260px; width: 290px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='13'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 609px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 234px; width: auto; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='12'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 40px; left: 609px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 583px; width: 170px; font-size: 24px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='15'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 609px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 563px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='14'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 40px; left: 786px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 583px; width: 170px; font-size: 24px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='17'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 786px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 563px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='16'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 290px; left: 916px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 260px; width: 62px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='19'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 916px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 240px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='18'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 280px; left: 15px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 452px; width: 488px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='21'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 15px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 432px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='20'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 55px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 164px; font-size: 16px; font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 408px; height: 232px; }
        [ni-control-id='22'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,173,239,1); height: 47px; left: 55px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 117px; width: 712px; font-size: 21px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='24'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 55px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 97px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='23'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 84px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: center; --ni-text-align: center; top: 4px; font-size: 64px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 824px; height: 86px; }
		/* End read only section. To add additional styles, add a new style tag after this one. */</style>

    
</head>

    <body><ni-web-application location="BROWSER" engine="VIREO" vireo-source="index.via.txt" wasm-url="ni-webvi-resource-v0/node_modules/vireo/dist/wasm32-unknown-emscripten/release/vireo.core.wasm"><ni-virtual-instrument vi-name="WebApp::index.gviweb"></ni-virtual-instrument></ni-web-application>
        <div id="ni-outdated-browser-message" style="display:none">This browser is missing features needed to run this web application. Open this web application in a supported browser.</div>

        <div class="ni-front-panel-wrapper" vi-ref="" ni-control-id="FrontPanelWrapper">
            <ni-front-panel control-resize-mode='fixed' layout='absolute' ni-control-id='2'>

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

            
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='3' text='banner'></ni-label>
            <ni-url-image alternate='' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Banner", "dco": 9, "isLatched": false, "prop": "source", "sync": false, "unplacedOrDisabled": true}' control-resize-mode='fixed' follower-ids='["3"]' href='' label-alignment='top-left' label-id='3' ni-control-id='4' read-only='true' source='data:image/svg+xml,%3C?xml%20version=%221.0%22%20encoding=%22UTF-8%22?%3E%3Csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20fill=%22%23044123%22/%3E%3C/svg%3E' stretch='uniform' target='_self'></ni-url-image>
            <jqx-slider binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Slider", "dco": 0, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["7"]' format='decimal' interval='1' label-alignment='top-left' label-id='7' labels-visibility='all' max='9' mechanical-action='switchWhileDragging' min='0' ni-control-id='5' ni-type='Double' orientation='horizontal' scale-position='far' show-tooltip='true' significant-digits='6' ticks-visibility='minor' validation='interaction' value='0'></jqx-slider>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='7' text='Slider'></ni-label>
            <jqx-slider binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Slider_2", "dco": 1, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["9"]' format='decimal' interval='1' label-alignment='top-left' label-id='9' labels-visibility='all' max='1' mechanical-action='switchWhileDragging' min='0' ni-control-id='6' ni-type='Double' orientation='horizontal' scale-position='far' show-tooltip='true' significant-digits='6' ticks-visibility='minor' validation='interaction' value='0'></jqx-slider>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='9' text='Slider_2'></ni-label>
            <jqx-tank binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Tank", "dco": 2, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["11"]' format='decimal' interval='1' label-alignment='top-left' label-id='11' labels-visibility='all' max='10' min='0' ni-control-id='8' ni-type='Double' orientation='vertical' readonly='true' scale-position='near' significant-digits='2' ticks-visibility='minor' validation='interaction' value='0'></jqx-tank>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='11' text='Tank'></ni-label>
            <jqx-gauge analog-display-type='fill' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Gauge", "dco": 3, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' digital-display='true' digital-display-position='center' end-angle='216' follower-ids='["13"]' format='decimal' interval='1' label-alignment='top-left' label-id='13' labels-visibility='all' max='10' min='0' ni-control-id='10' ni-type='Double' readonly='true' scale-position='inside' significant-digits='2' size-mode='circle' start-angle='-36' ticks-visibility='minor' validation='interaction' value='0'></jqx-gauge>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='13' text='Gauge'></ni-label>
            <jqx-numeric-text-box binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Numeric", "dco": 4, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": true}' control-resize-mode='fixed' enable-mouse-wheel-action='true' follower-ids='["15"]' label-alignment='top-left' label-id='15' max='Infinity' min='-Infinity' ni-control-id='12' ni-type='Double' radix='decimal' significant-digits='2' spin-buttons='true' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='10000' validation='interaction' value='879478'></jqx-numeric-text-box>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='15' text='Numeric'></ni-label>
            <jqx-numeric-text-box binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Numeric_2", "dco": 5, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": true}' control-resize-mode='fixed' enable-mouse-wheel-action='true' follower-ids='["17"]' label-alignment='top-left' label-id='17' max='Infinity+Infinityi' min='-Infinity-Infinityi' ni-control-id='14' ni-type='ComplexDouble' radix='decimal' significant-digits='6' spin-buttons='true' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='1+0i' validation='interaction' value='103+4i'></jqx-numeric-text-box>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='17' text='Numeric_2'></ni-label>
            <jqx-slider binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Slider_3", "dco": 6, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["19"]' format='decimal' interval='1' label-alignment='top-left' label-id='19' labels-visibility='all' max='10' mechanical-action='switchWhileDragging' min='0' ni-control-id='16' ni-type='Double' orientation='vertical' scale-position='near' show-tooltip='true' significant-digits='6' ticks-visibility='minor' validation='interaction' value='0'></jqx-slider>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='19' text='Slider_3'></ni-label>
            <ni-url-image alternate='' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_URLImage", "dco": 7, "isLatched": false, "prop": "source", "sync": false, "unplacedOrDisabled": true}' control-resize-mode='fixed' follower-ids='["21"]' href='' label-alignment='top-left' label-id='21' ni-control-id='18' read-only='true' source='images/WebVIDiagram.png' stretch='uniform' target='_self'></ni-url-image>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='21' text='URL Image'></ni-label>
            <ni-text control-resize-mode='fixed' ni-control-id='20' text='This example demonstrates how to add resource files such as images, CSS files, JavaScript files, and HTML files to your web application component and reference them in a WebVI without needing to upload these files to a web server.

You can also use resource files to augment the WebVI&apos;s capabilities. For example, you can add other HTML widgets or scripts and reference them in the HTML view of the WebVI.'></ni-text>
            <ni-hyperlink binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_HyperlinkControl", "dco": 8, "isLatched": false, "prop": "href", "sync": false, "unplacedOrDisabled": true}' content='Learn more about this example at github.com/ni/webvi-examples' control-resize-mode='fixed' follower-ids='["24"]' href='https://github.com/ni/webvi-examples' label-alignment='top-left' label-id='24' ni-control-id='22' target='_self'></ni-hyperlink>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='24' text='Hyperlink Control'></ni-label>
            <ni-text control-resize-mode='fixed' ni-control-id='23' text='Incorporate User Resources'></ni-text>
        </ni-front-panel>

        </div>
    </body>

</html>